<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:insert="~{include :: header('banner图管理列表')}" />
    <th:block th:insert="~{include :: bootstrap-table-css}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
         <div class="card card-primary card-outline card-outline-tabs mb-0">
             <div class="card-header p-0 border-bottom-0">
                 <ul class="nav nav-tabs">
                     <li class="nav-item" th:each="channel : ${channelList}">
                         <a class="nav-link" th:href="'/advert/list.html?channelId='+${channel.channelId}" th:classappend="${channelId == channel.channelId?'active':''}" th:text="${channel.channelName}"></a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" th:classappend="${channelId == 0?'active':''}" href="/advert/list.html?channelId=0">其他</a>
                     </li>
                 </ul>
             </div>
             <div class="card-body">
                 <form id="formId" class="form-inline">
                     <input class="form-control mr-1" placeholder="请输入标题" type="text" name="courseName"/>
                     <select  class="form-control mr-1" name="typeId" th:with="type=${advertTypeList}">
                         <option value="">类型</option>
                         <option th:each="dict : ${type}" th:text="${dict.typeName}" th:value="${dict.typeId}"></option>
                     </select>
                     <input type="hidden" name="channelId" th:value="${channelId}"/>
                     <a class="btn btn-primary btn-rounded mr-1" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                     <a class="btn btn-warning btn-rounded" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                 </form>
             </div>
         </div>
         <div class="toolbar" id="toolbar" role="group">
             <a class="btn btn-success" onclick="addImager()">
                 <i class="fa fa-plus"></i> 添加
             </a>
             <a class="btn btn-danger" onclick="cleanImgCache()">
                 <i class="fa fa-refresh"></i> 清理缓存
             </a>
         </div>
         <div class="select-table table-striped">
             <table id="bootstrap-table" class="table-striped"></table>
         </div>
    </div>
    <th:block th:insert="~{include :: footer}" />
     <th:block th:insert="~{include :: bootstrap-table-js}" />
    <script th:inline="javascript">

        var advertTypeList = [[${advertTypeList}]];
        var prefix = "/advert";
        var channelId = [[${channelId}]];
        $(function() {
            var options = {
                showSearch: false,
                showRefresh: false,
                showToggle: false,
                showColumns: false,
                url: prefix + "/list.json?channelId="+channelId,
                removeUrl: prefix + "/remove.json",
                modalName: "banner图管理",
                columns: [
                {
                    field: 'id',
                    title: 'id'
                },
                 {
                     field: 'title',
                     title: '标题'
                 },
                 {
                     field: 'typeId',
                     title: '类型',
                     formatter: function(value, row, index) {
                         var str = "-";
                         advertTypeList.forEach(function (val , index) {
                             if(val.typeId === value){
                                 str = val.typeName;
                             }
                         })
                         return str;
                     }
                 },
                {
                    field: 'imagesUrl',
                    title: '图片Url'
                },
                {
                    field: 'linkAddress', 
                    title: '链接Url'
                },
                 {
                     field: 'sort',
                     title: '排序'
                 },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="editImager(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
            };
            $.table.init(options);
        });

        function addImager(){
            var index = layer.open({
                title: '添加图片',
                type: 2,
                shade: 0.2,
                shadeClose: true,
                area: ['80%', '95%'],
                content: '/advert/add.html?channelId='+channelId
            });
        }

        function editImager(id){
            var index = layer.open({
                title: '编辑图片',
                type: 2,
                shade: 0.2,
                shadeClose: true,
                area: ['80%', '95%'],
                content: '/advert/edit/'+id
            });
        }

        /** 清理缓存 */
        function cleanImgCache() {
            $.operate.post("/advert/clean.json?channelId="+channelId);
        }
    </script>
</body>
</html>